import React, { useState } from 'react';
import { Table, Pagination, } from 'antd';

const GradesList = ({
  column,
  grades,
}) => {
  
  const [currentPage, setCurrentPage] = useState(1);

  // 分页处理
  const pageSize = 11
  const total = grades?.length;
  const onPageChange = (page, pageSize) => {
    setCurrentPage(page);
  };

  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const currentData = grades?.slice(start, end).map((item, index) => {
    const grade = { ...item, index: index + 1 + start }
    // 序号不重复
    return grade
  })

  return (
    <>
      <Table
        bordered
        columns={column}
        dataSource={currentData}
        pagination={false}
        size="small"
        scroll={{ x: 'max-content' }}
        rowKey={"index"}
      />
      <Pagination
        size='small'
        current={currentPage}
        pageSize={pageSize}
        total={total}
        onChange={onPageChange}
        showSizeChanger={false}
        style={{ marginTop: '16px', textAlign: 'right' }}
      />
    </>
  );
};

export default GradesList;
